/* eslint-disable react/prefer-es6-class */
/**
 * type: 1, // 1一元拍 || 2普通竞价拍卖 || 0数字输入
 * lastPrice: "价格",//2普通竞价拍卖
 * container: "容器",  // 触发此组件的dom
 * ajaxUrl: "请求地址", // 1一元拍 || 2普通竞价拍卖 的时候需要
 * input: "输入容器",  //0数字输入 的时候需要
 */
import React from 'react';
import WPT from 'wpt';
import createReactClass from 'create-react-class';
import readAgreement from 'modules/readAgreement';

import './css/fixednumMain.less';
import { ProtocolLink, ProtocolType } from 'views/protocol';

const Fixednum = createReactClass({
    statics: {
        self: null,
    },
    getInitialState() {
        Fixednum.self = { close: this.close };
        return {
            txt: this.props.txt, // 0数字输入的时候需要
            opacity: this.props.opacity,
            title: this.props.title || '领先价',
            finishText: this.props.finishText || '完成',
            type: this.props.type || 1, // 1一元拍 || 2普通竞价拍卖 || 0数字输入
            isHide: true,
            lastPrice: this.props.lastPrice,
            offerPrice: this.props.type == '1' ? 20 : this.props.offerPrice || '',
            fixedPrice: this.props.fixedPrice,
            finish: this.props.finish,
            exportPrice: this.props.exportPrice,
            num: [
                { num: 1 },
                { num: 2, letter: 'ABC' },
                { num: 3, letter: 'DEF' },
                { num: 4, letter: 'GHI' },
                { num: 5, letter: 'JKL' },
                { num: 6, letter: 'MNO' },
                { num: 7, letter: 'PQRS' },
                { num: 8, letter: 'TUV' },
                { num: 9, letter: 'WXYZ' },
            ],
            target: '',
            dot: false,
            showTipBanner: true,
            showAgreement: true,
            confirmText: '出个价',
        };
    },
    componentDidMount() {
        // 页面渲染后
        const self = this;
        $(document).on('keyup', e => {
            if ($('.fixednumMain').css('display') != 'block') {
                return;
            }
            if (e.keyCode == '8') {
                // Backspace  delete
                self.clearPrice('back');
            }
            if (e.keyCode == '13') {
                // enter
                self.finish();
            }
            if (e.keyCode >= 48 && e.keyCode <= 57) {
                self.input(e.keyCode - 48);
            }
            if (e.keyCode >= 96 && e.keyCode <= 105) {
                self.input(e.keyCode - 96);
            }
        });
    },
    componentDidUpdate() {
        // 在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用
    },
    componentWillUnmount() {
        WPT.event.off(this.props.container);
        $(document).off('keyup');
    },
    show(data) {
        WPT.localStorage.setItem('wpt_memberAgreement_show', 1);

        let offerPrice = data.type == '1' ? 20 : data.offerPrice;
        offerPrice = this.handelOfferPrice(offerPrice, data.fixedPrice);
        this.setState(
            {
                type: data.type,
                title: data.title || '领先价',
                inputTitle: data.inputTitle,
                txt: data.txt,
                opacity: data.opacity,
                finishText: data.finishText || '完成',
                isHide: false,
                target: data.target,
                lastPrice: data.lastPrice,
                offerPrice,
                fixedPrice: data.fixedPrice || '',
                finish: data.finish,
                exportPrice: data.exportPrice,
                dot: data.dot,
                showTipBanner: data.showTipBanner === undefined ? true : data.showTipBanner, // type != 0时有作用
                showAgreement: data.showAgreement === undefined ? true : data.showAgreement, // type != 0时有作用
                customAgreement: data.customAgreement,
                confirmText: data.confirmText || '出价', // type != 0时有作用
                tipMessage: data.tipMessage,
                className: data.className,
                placeholder: data.placeholder || false,
                isAuctionHouse: data.isAuctionHouse || false,
            },
            () => {
                data.callback && data.callback();
            }
        );
    },
    handelOfferPrice(offerPrice, fixedPrice) {
        if (fixedPrice > 0 && offerPrice > fixedPrice) {
            offerPrice = fixedPrice;
        }
        return offerPrice;
    },
    input(num) {
        let newNum;
        if (this.state.dot) {
            newNum = num === '.' && this.state.offerPrice.toString().includes('.')
                ? this.state.offerPrice
                : `${this.state.offerPrice || 0}${num}`;
        } else {
            newNum = parseInt(`${this.state.offerPrice || 0}${num}`);
        }
        this.refreshPrice(newNum);
    },
    // eslint-disable-next-line no-unused-vars
    clearPrice(back, e) {
        // 清理价格
        if (back != 'back') {
            e = back;
        }
        let offerPrice = '';
        if (back == 'back') {
            offerPrice = this.state.dot
                ? this.state.offerPrice.toString().slice(0, -1)
                : parseInt((this.state.offerPrice || 0) / 10) || '';
        }
        this.refreshPrice(offerPrice);
    },
    changePrice(type) {
        // 一元拍 里的 增加 减少 价格
        let addPrice = 1;
        if (type == '0') {
            // 减低价格
            addPrice = -addPrice;
        }
        this.refreshPrice(this.state.offerPrice + addPrice);
    },
    refreshPrice(offerPrice) {
        offerPrice = this.handelOfferPrice(offerPrice, this.state.fixedPrice);
        if (this.state.exportPrice) {
            offerPrice = this.state.exportPrice(offerPrice, this.state.target);
        }
        this.setState({
            offerPrice,
        });
    },
    finish(fromMask, e) {
        if (!e) {
            e = fromMask;
            fromMask = false;
        }
        let close = true;
        if (this.state.finish && !this.state.finish(this.state.offerPrice, this.state.target, fromMask)) {
            close = false;
        }

        if (this.state.offerPrice == '') {
            this.refreshPrice('0');
        }
        close && this.close();
    },
    fixedPrice() {
        this.setState({
            offerPrice: this.state.fixedPrice,
        });
    },
    close() {
        this.setState({
            isHide: true,
        });
    },
    showMemberAgreement() {
        return !WPT.localStorage.getItem('wpt_memberAgreement_show');
    },
    render() {
        if (this.state.isHide) {
            return null;
        }
        const self = this;
        const state = this.state;
        return (
            <div id="fixednumMain" className={state.className}>
                <div
                    className="fixednumMask"
                    style={{ opacity: state.opacity || '0.38' }}
                    {...WPT.onTouchEnd(this.finish.bind(this, true), 1)}
                />
                <div className="fixednumMain flip-up">
                    {state.type == '0' ? (
                        <div className="tipBanner">
                            <span className="title">{state.txt ? state.txt : '出价'}</span>
                            <div className="finish" {...WPT.onTouchEnd(this.finish, 1)}>
                                {state.finishText || '完成'}
                            </div>
                        </div>
                    ) : (
                        <div>
                            {state.showTipBanner && (
                                <div className="tipBanner">
                                    <span className="title">{state.title || '领先价'}</span>
                                    {state.type == '1' ? (
                                        ''
                                    ) : (
                                        <div className="last">{WPT.Util.number_format(state.lastPrice)}</div>
                                    )}
                                    {state.tipMessage ? <span className="tipMessage">{state.tipMessage}</span> : ''}
                                    <div className="close" {...WPT.onTouchEnd(this.close, 1)} />
                                </div>
                            )}
                            <div className="priceBanner">
                                <span className="title">{state.inputTitle || '出价'}</span>
                                <div className="editTxt">
                                    <span
                                        className={`hover ${state.offerPrice && 'valid'} ${state.placeholder
                                            && !state.offerPrice
                                            && 'placeholder'}`}
                                    >
                                        {state.placeholder && !state.offerPrice ? state.placeholder : WPT.Util.number_format(state.offerPrice)}
                                    </span>
                                </div>
                                {state.type == '1' ? (
                                    ''
                                ) : state.offerPrice ? (
                                    <div className="tips" {...WPT.onTouchEnd(self.clearPrice, 1)}>
                                        {state.fixedPrice > 0 && state.offerPrice >= state.fixedPrice ? (
                                            '立即成交！'
                                        ) : (
                                            <div className="clearPrice" />
                                        )}
                                    </div>
                                ) : (
                                    ''
                                )}
                            </div>
                            {state.type == '1' ? (
                                <div className="btnBanner">
                                    <div
                                        data-touch="touchEffect"
                                        className="changePrice sub"
                                        {...WPT.onTouchEnd(self.changePrice.bind(self, 0), 1)}
                                    />
                                    <div
                                        data-touch="touchEffect"
                                        className="confirmBtn"
                                        {...WPT.onTouchEnd(self.finish, 1)}
                                    >
                                        {state.confirmText}
                                    </div>
                                    <div
                                        data-touch="touchEffect"
                                        className="changePrice add"
                                        {...WPT.onTouchEnd(self.changePrice.bind(self, 1), 1)}
                                    />
                                </div>
                            ) : (
                                <div className="btnBanner">
                                    {state.fixedPrice > 0 ? (
                                        <div className="fixedPrice" {...WPT.onTouchEnd(self.fixedPrice)}>
                                            <div>
                                                <span>￥</span>
                                                {WPT.Util.number_format(state.fixedPrice)}
                                            </div>
                                            立即成交
                                        </div>
                                    ) : null}
                                    <div className="confirmBtn" {...WPT.onTouchEnd(self.finish, 1)}>
                                        {state.confirmText}
                                    </div>
                                </div>
                            )}
                            {state.showAgreement && state.customAgreement ? (
                                state.customAgreement
                            ) : (
                                <>
                                    <div className="agreeBanner">
                                        出价即表示同意
                                        {state.type == '1' ? (
                                            <ProtocolLink
                                                style={{ color: '#878787' }}
                                                uri={ProtocolType.OneYuanPayService}
                                            >
                                                《微拍堂一元拍服务协议》
                                            </ProtocolLink>
                                        ) : (
                                            <>
                                                <span
                                                    style={{ color: '#878787' }}
                                                    {...WPT.onTouchEnd(readAgreement(3))}
                                                >
                                                    《微拍堂交易服务用户协议》
                                                </span>
                                                <span
                                                    style={{ color: '#878787' }}
                                                    {...WPT.onTouchEnd(readAgreement(1))}
                                                >
                                                    《隐私保护政策》
                                                </span>
                                                {state.isAuctionHouse && (
                                                    <div {...WPT.onTouchEnd(readAgreement(5))}>
                                                        《拍卖行店铺参拍须知》
                                                    </div>
                                                )}
                                            </>
                                        )}
                                    </div>
                                    {this.showMemberAgreement() && (
                                        <div className="agreeBanner">
                                            <span style={{ color: '#878787' }} {...WPT.onTouchEnd(readAgreement(2))}>
                                                《微拍堂会员服务用户协议》
                                            </span>
                                        </div>
                                    )}
                                </>
                            )}
                        </div>
                    )}
                    <div className="numkey">
                        <ul>
                            {state.num.map((item, i) => (
                                <li
                                    key={i}
                                    data-touch="touchEffect"
                                    className="num"
                                    {...WPT.onTouchEnd(self.input.bind(self, item.num), 1)}
                                >
                                    <div className="number">{item.num}</div>
                                    <div className="letter">{item.letter}</div>
                                </li>
                            ))}
                            <li
                                data-touch="touchEffect"
                                className="num othernum"
                                {...WPT.onTouchEnd(self.input.bind(self, state.dot ? '.' : '00'), 1, true)}
                            >
                                {state.dot ? '.' : '00'}
                            </li>
                            <li
                                data-touch="touchEffect"
                                className="num"
                                style={{ lineHeight: '50px' }}
                                {...WPT.onTouchEnd(self.input.bind(self, 0), 1, true)}
                            >
                                0
                            </li>
                            <li
                                data-touch="touchEffect"
                                className="delete"
                                {...WPT.onTouchEnd(self.clearPrice.bind(self, 'back'), 1, true)}
                            />
                        </ul>
                    </div>
                </div>
            </div>
        );
    },
});

export default Fixednum;
